<template>
  <div class="login-page-wrapper">
    <div class="login-box">
      <div class="icon"></div>
      <div class="login-form">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="用户名" prop="account">
            <el-input
              placeholder="请填写用户名"
              :maxLength="20"
              v-model="form.account"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              placeholder="请填写密码"
              :maxLength="20"
              v-model="form.password"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="login-button">
        <el-button type="primary" @click="">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { loginFn, getFnText } from "./api";
import type { loginParams } from "./api";
onMounted(async () => {
  const res = await loginFn({
    account: "admin",
    password: "123456",
  });
  console.log(res);
});
const form = ref<loginParams>({
  account: "",
  password: "",
});
const formRef = ref();
const rules = reactive({
  account: [{ required: true, message: "请填写姓名", trigger: "blur" }],
  password: [{ required: true, message: "请填写密码", trigger: "blur" }],
});

//执行登录
const handleLogin = () => {
  formRef.value.validate(async (valid: any) => {
    if (!valid) return;
    const res = await loginFn({
      account: form.value.account,
      password: form.value.password,
    });
    console.log(res);
  });
};
</script>

<style lang="less" scoped>
.login-page-wrapper {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 500px;
    height: 200px;
    .login-button {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
